<template>
  <div>
    <div class="content">
      <div class="consigneeInfo">
        <div class="title">
          <span>收货人信息</span>
        </div>
        <div class="consigneeInfoName">
          <!-- <p class="name">姓名：{{shopInfo.addressContact}}</p>
          <p class="phone">手机号：{{shopInfo.addressPhone}}</p>-->
          <p class="name">姓名：{{shopInfo.realName}}</p>
          <p class="phone">手机号：{{shopInfo.phone}}</p>
        </div>
        <div class="consigneeInfoAdd">
          <span>{{shopInfo.province ? shopInfo.province + shopInfo.city + shopInfo.area + shopInfo.addressInfo : '无地址'}}</span>
          <div @click="updateAdd">
            <img src="https://akk.028wkf.cn/kdb-weapp-img/img/ptxg.png" alt />
            <span>修改地址</span>
          </div>
        </div>
        <div class="operation">
          <!-- <div>
            <img src="https://akk.028wkf.cn/kdb-weapp-img/img/lxhy.png" alt>
            <span>联系会员</span>
          </div>-->
          <!-- <div>
            <img src="https://akk.028wkf.cn/kdb-weapp-img/img/ckzl.png" alt>
            <span>查看资料</span>
          </div>-->
        </div>
      </div>
      <!-- 订单状态 -->
      <div class="orderState" @click="particulars(shopInfo.state)">
        <div class="stateLeft">
          订单状态：
          <span>
            {{shopInfo.state === '1' && (shopInfo.shippingMode === '1' || shopInfo.shippingMode === '2') ? '待核销'
            : shopInfo.state === '1' ? '待发货'
            : shopInfo.state === '0' ? '待付款'
            : shopInfo.state === '3' ? '已收货'
            : shopInfo.state === '4' ? '退款中'
            : shopInfo.state === '5' ? '已退款'
            : shopInfo.state === '8' ? '已拒绝' : ''}}
          </span>
        </div>
        <div
          class="stateRight"
          v-if="shopInfo.state === '1' ? false : shopInfo.state === '0' ? false : shopInfo.state === '3' ? false :shopInfo.state === '4' ? true : true"
        >
          <span>详情</span>
          <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" alt />
        </div>
        <div
          class="stateRight2"
          v-if="(shopInfo.state === '1' || shopInfo.state === '8' ) && shopInfo.shippingMode === '0'"
        >
          <span>查看物流</span>
          <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" alt />
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="shopInfo">
        <div class="title">
          <span>商品信息</span>
        </div>
        <div
          class="shopInfoCont"
          v-for="(item,index) in shopInfoList"
          :key="index"
        >
          <div class="shopLeft">
            <img :src="item.goodsImage" alt />
            <div class="contInfo">
              <span>{{item.goodsName}}</span>
              <!-- <p>规格：{{item.goodsSpec === null ? '无规格' : item.goodsSpec}}</p> -->
              <!-- <label>库存：200</label> -->
            </div>
          </div>
          <div class="contMoney">
            <span class="contMoneyZ">￥{{item.goodsAmount}}</span>
            <span>￥{{item.goodsDiscount}}</span>
            <p>×{{item.goodsNum}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 展示信息 -->
    <div class="showBox">
      <div class="showInfo">
        <div>
          <span>运费</span>
          <p>￥{{shopInfo.shippingFee}}</p>
        </div>
        <!-- <div>
          <span>优惠信息(没有信息)</span>
          <p>新手优惠券￥-1.00</p>
        </div>-->
        <div>
          <span>订单实际金额</span>
          <p>￥{{shopInfo.discount}}</p>
        </div>
      </div>
    </div>
    <!-- 订单编号 -->
    <div class="orderNum">
      <p>订单编号：{{shopInfo.orderNo}}</p>
      <p>订单类型：{{shopForm[shopInfo.orderType]}}</p>
      <p>服务方式：{{modeForm[shopInfo.shippingMode]}}</p>
    </div>
    <div class="kongBtnBox"></div>
    <!-- 操作按钮 -->
    <div class="operationBtn">
      <button class="operationBtn1" @click="copyOrderNum">复制订单号</button>
      <button
        @click="verificationRefund"
        v-if="shopInfo.state === '1' && shopInfo.shippingMode === '2' && isDis !== '1'"
      >核销</button>
      <!-- <button
        @click="yesRefund"
        v-if="shopInfo.shippingMode === '0' && shopInfo.shippingMode !== '1' && shopInfo.shippingMode !== '2' && (shopInfo.state === '1' || shopInfo.state === '8') ? true : false"
      >发货</button>-->
      <button
        @click="yesRefund"
        v-if="shopInfo.shippingMode === '0' && shopInfo.state === '1' && isDis !== '1'"
      >发货</button>
      <button
        @click="rejectRefund"
        v-if="shopInfo.state === '4' && isDis !== '1'"
      >拒绝退款</button>
      <button
        @click="agreeRefund"
        v-if="shopInfo.state === '4' && isDis !== '1'"
      >同意退款</button>
    </div>

    <modal v-if="visible1" @confirm="handleClose1" @cancel="handleClose1">
      <div class="inputCalss">商家订单确认</div>
      <input class="inputCalss" type="text" v-model="shopInfo.orderNo" disabled />
      <input
        class="inputCalss2"
        v-model="verificationRefundValue"
        type="text"
        placeholder="请输入核销码"
        @change="verificationRefundChange"
        maxlength="888"
      />
    </modal>
    <modal v-if="visible2" @confirm="handleClose2" @cancel="handleClose2">
      <div class="physicalBox">
        <picker
          @change="bindPickerChange"
          :range="physicalSelect"
          :value="physicalvalue"
        >
          <view class="picker">物流类型：{{physicalName}}</view>
        </picker>
      </div>
      <input
        class="inputCalss2"
        v-model="physicalRefundValue"
        type="text"
        placeholder="请输入物流单号"
        @change="physicalRefundChange"
        maxlength="888"
      />
    </modal>
    <div class="rejectRefundClass" v-if="rejectRefundClass">
      <p>请写拒绝理由</p>
      <textarea
        class="input"
        wrap="hard"
        placeholder="请输入拒绝理由"
        maxlength="9999"
        v-model="textareaVal"
      ></textarea>
      <div>
        <button class="ok" @click="rejectRefundOk">确认</button>
        <button class="no" @click="rejectRefundNo">取消</button>
      </div>
    </div>
    <div class="zz" v-if="rejectRefundClass"></div>
  </div>
</template>

<script>
import physical from '../../../../static/physical'
import {
  FIND_ORDER_NO_INFO,
  COMPLETE_ORDER,
  UPDATE_ORDER_API,
  FIND_REFUND_PAGE_API,
  FIND_REFUND_RATIO,
  AGREE_REFUND,
  REFUSE_REFUND
} from '@/api'

export default {
  components: {},
  data () {
    return {
      shopInfo: {
        addressContact: '',
        province: '',
        addressPhone: '',
        orderNo: '',
        shippingMode: '',
        amount: '', // 总价
        discount: '', // 折扣
        orderDate: '', // 下单时间
        shippingFee: '', // 运费
        state: '' // 状态
      },
      shopInfoList: [],
      visible1: false,
      visible2: false,
      verificationRefundValue: '', // 核销码
      physicalRefundValue: '', // 物流
      physicalName: '', // 物流类型渲染名称
      setphysical: '', // 传给后台物流类型
      physicalTypeArr: [
        { name: 'EMS', code: 'EMS' },
        { name: '顺丰', code: 'SF' },
        { name: '圆通', code: 'YTO' },
        { name: '百世快递', code: 'HTKY' },
        { name: '中通', code: 'ZTO' },
        { name: '韵达', code: 'YD' },
        { name: '申通', code: 'STO' },
        { name: '德邦', code: 'DBL' },
        { name: '优速', code: 'UC' },
        { name: '宅急送', code: 'ZJS' },
        { name: '京东', code: 'JD' },
        { name: '信丰', code: 'XFEX' },
        { name: '全峰', code: 'QFKD' },
        { name: '跨越', code: 'KYSY' },
        { name: '安能', code: 'ANE' },
        { name: '快捷', code: 'FAST' },
        { name: '国通', code: 'GTO' },
        { name: '天天', code: 'HHTT' },
        { name: '邮政', code: 'YZPY' },
        { name: '中铁快运', code: 'ZTKY' }
      ],
      physicalSelect: [
        'EMS',
        '顺丰',
        '圆通',
        '百世快递',
        '中通',
        '韵达',
        '申通',
        '德邦',
        '优速',
        '宅急送',
        '京东',
        '信丰',
        '全峰',
        '跨越',
        '安能',
        '快捷',
        '国通',
        '天天',
        '邮政',
        '中铁快运'
      ],
      physicalvalue: 0,
      physicalList: [Object.keys(physical)],
      orderNo: '',
      refundNum: null,
      textareaVal: '',
      rejectRefundClass: false,
      shopForm: {
        shop: '普通订单',
        platform: '平台订单',
        offline: '线下收款码',
        group: '拼团订单',
        dis: '分销订单'
      },
      modeForm: {
        '0': '物流',
        '1': '到店自提',
        '2': '商家上门',
        '3': '店内消费'
      },
      isDis: ''
    }
  },
  onShow () {
    this.init()
    this._findOrderNoInfo()
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  created () {},
  methods: {
    updateAdd () {
      this.$router.push(
        `/pages/shop-management/shop-order-update/main?shopInfo=${JSON.stringify(
          this.shopInfo
        )}`
      )
    },
    particulars (value) {
      if (value === '4' || value === '5' || value === '8') {
        let info = JSON.stringify(this.shopInfo)
        this.$router.push(
          '/pages/shop-management/shop-refund/main?info=' + info
        )
      } else if (value === '1') {
        this.$router.push(
          `/pages/shop-management/shop-order-info-logistics/main?orderNo=${
            this.shopInfo.orderNo
          }`
        )
      }
    }, // 详情按钮
    copyOrderNum () {
      this.copy()
    }, // 复制订单号按钮
    verificationRefund () {
      this.visible1 = true
    }, // 核销码
    yesRefund () {
      // this.visible2 = true // 21091024 新增页面 发货就不用弹窗了
      this.$router.push(
        `/pages/shop-management/shop-order-info-shipments/main?orderNo=${
          this.shopInfo.orderNo
        }`
      )
    }, // 同意退款按钮
    copy () {
      wx.setClipboardData({
        // 这个地方的data应是订单号
        data: this.shopInfo.orderNo,
        success: function (res) {
          wx.getClipboardData({
            success: function (res) {
              console.log('复制的内容：', res.data) // data
            }
          })
        }
      })
    }, // 拷贝信息（后面接接口的时候讲data替换掉）
    verificationRefundChange (e) {
      let value = e.mp.detail.value
      this.verificationRefundValue = value
    }, // 核销码change事件
    bindPickerChange (e) {
      const vm = this
      let index = Number(e.mp.detail.value)
      for (let i = 0; i < vm.physicalSelect.length; i++) {
        if (index === Number(i)) {
          vm.physicalName = vm.physicalSelect[i] // 渲染在页面上的物流名称
          for (let j = 0; j < vm.physicalTypeArr.length; j++) {
            if (vm.physicalName === vm.physicalTypeArr[j].name) {
              vm.setphysical = vm.physicalTypeArr[j].code // 像后台传的快递编号
            }
          }
        }
      }
    }, // 选择物流类型
    physicalRefundChange (e) {
      let value = e.mp.detail.value
      this.physicalRefundValue = value
    }, // 物流号change事件
    handleClose1 (e) {
      const vm = this
      let type = e.mp.type
      if (type === 'confirm') {
        if (vm.verificationRefundValue !== '') {
          // 核销码
          COMPLETE_ORDER(
            vm.account.shopId,
            vm.shopInfo.orderNo,
            vm.verificationRefundValue
          )
            .then(r => {
              if (r.data.code === '0') {
                vm.$alert('核销成功', '').then(() => {
                  // vm.$router.replace('/pages/shop-management/shop-order/main')
                  vm.$router.go(-1)
                })
              } else {
                vm.smallHintFrame(r.data.message)
              }
            })
            .catch(e => {
              console.info(e)
            })
        } else {
          vm.smallHintFrame('核销码不能为空~~~')
        }
      } else {
        vm.visible1 = false
      }
    }, // 输入核销码确定按钮
    handleClose2 (e) {
      const vm = this
      let type = e.mp.type
      let params = {
        orderNo: vm.shopInfo.orderNo,
        shippingCode: vm.setphysical,
        logisticCode: vm.physicalRefundValue
      }
      if (type === 'confirm') {
        if (vm.physicalName !== '') {
          if (vm.physicalRefundValue !== '') {
            UPDATE_ORDER_API(params)
              .then(r => {
                if (r.data.code === '0' || r.data.data) {
                  vm.$alert('物流单号提交成功', '').then(() => {
                    // vm.$router.replace('/pages/shop-management/shop-order/main')
                    vm.$router.go(-1)
                  })
                } else {
                  vm.smallHintFrame(r.data.message)
                }
              })
              .catch(e => {
                console.info(e)
              })
          } else {
            vm.smallHintFrame('物流单号不能为空~~~')
          }
        } else {
          vm.smallHintFrame('物流类型还没有选择~~~')
        }
      } else {
        this.visible2 = false
      }
    }, // 输入物流确定按钮
    _findOrderNoInfo () {
      const vm = this
      let orderNo = vm.$root.$mp.query.orderNo
      FIND_ORDER_NO_INFO(orderNo)
        .then(r => {
          if (r.data.code === '0') {
            vm.shopInfoList = r.data.data.orderGoodsList
            vm.shopInfo = {
              // addressContact: r.data.data.addressContact, // 收货姓名
              // addressPhone: r.data.data.addressPhone, // 收货电话
              // province:
              //   r.data.data.province +
              //   r.data.data.city +
              //   r.data.data.area +
              //   r.data.data.addressInfo, // 收货地址
              // orderNo: r.data.data.orderNo, // 订单号
              // shippingMode: r.data.data.shippingMode, // 收货方式
              // amount: r.data.data.amount, // 总价
              // discount: r.data.data.discount, // 折扣
              // orderDate: r.data.data.orderDate, // 下单时间
              // shippingFee: r.data.data.shippingFee, // 运费
              // state: r.data.data.state // 状态
              // // shippingCode: r.data.data.shippingCode
              // // logisticCode: r.data.data.logisticCode
              ...r.data.data
            }
            vm.setphysical = r.data.data.shippingCode // 物流
            vm.physicalRefundValue = r.data.data.logisticCode // 物流单号
            vm.orderNo = r.data.data.orderNo
            vm.pickerInit()
          } else {
            vm.smallHintFrame(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 查询单条订单信息
    smallHintFrame (value) {
      wx.showToast({
        title: value,
        icon: 'none',
        duration: 2000
      })
    }, // 小提示框
    init () {
      const vm = this
      vm.visible1 = false
      vm.visible2 = false
      vm.verificationRefundValue = ''
      vm.physicalRefundValue = ''
      vm.physicalName = ''
      vm.setphysical = ''
      vm.isDis = vm.$root.$mp.query.isDis ? '1' : '2'
    },
    pickerInit () {
      this.physicalTypeArr.forEach(_ => {
        if (_.code === this.setphysical) {
          this.physicalSelect.forEach((e, i) => {
            if (_.name === e) {
              this.physicalName = e
              this.physicalvalue = i
            }
          })
        }
      })
    },
    rejectRefund () {
      this.rejectRefundClass = true
    }, // 拒绝退款
    agreeRefund () {
      this._findAgreeRefund('0')
    }, // 同意退款按钮
    _findAgreeRefund (num) {
      let params = {
        orderNo: this.orderNo,
        providerId: this.account.providerId,
        shopId: this.account.shopId
      }
      FIND_REFUND_PAGE_API(params, 1, 999)
        .then(r => {
          if (r.data.code === '0') {
            let data = r.data.data.list[0]
            if (num === '0') {
              this._serviceRefund(data)
            } else {
              this._rejectRefund(data)
            }
          } else {
            this.smallHintFrame(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 查询单条退款详情
    _serviceRefund (data) {
      FIND_REFUND_RATIO(data.refundId, data.shopId)
        .then(r => {
          if (r.data.code === '0') {
            this.refundNum = r.data.data
            // this.$dialog(
            //   '手续费为' + this.refundNum + '元,是否确认退款',
            //   ''
            // )
            this.$dialog('是否继续退款操作', '').then(() => {
              this._confirmRefund(data)
            })
          } else {
            this.smallHintFrame(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 查询手续费
    _confirmRefund (data) {
      AGREE_REFUND(data.refundId, data.shopId, this.refundNum)
        .then(r => {
          if (r.data.data === '0') {
            // if (r.data.data) {
            // }
            wx.showModal({
              title: '提示',
              content: '退款成功',
              showCancel: false,
              success (res) {
                if (res.confirm) {
                  this.$router.go(-1)
                }
              }
            })
          } else {
            this.smallHintFrame(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 确认退款
    _rejectRefund (data) {
      REFUSE_REFUND(data.refundId, this.textareaVal)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            this._findOrderNoInfo()
            this.$toast('拒绝退款成功')
            this.rejectRefundClass = false
            this.textareaVal = ''
          } else {
            this.smallHintFrame(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 拒绝退款
    rejectRefundOk () {
      if (!this.textareaVal) {
        this.smallHintFrame('拒绝理由不能为空')
      } else {
        this._findAgreeRefund('1')
      }
    },
    rejectRefundNo () {
      this.rejectRefundClass = false
      this.textareaVal = ''
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.content {
  width: 360px;
  margin: auto;
  // 订单信息
  .consigneeInfo {
    height: auto;
    margin: 0 auto 15px;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .title {
      font-size: 16px;
      line-height: 16px;
      padding-top: 30px;
      margin: 0 0 0 10px;
      span {
        padding-left: 5px;
        color: #5996f8;
        border-left: 5px solid #5996f8;
      }
    }
    .consigneeInfoName {
      width: 320px;
      margin: 10px auto 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      line-height: 14px;
      .name {
        color: #000;
      }
      .phone {
        color: #5996f8;
      }
    }
    .consigneeInfoAdd {
      font-size: 14px;
      line-height: 14px;
      // min-height: 28px;
      width: 320px;
      margin: auto;
      position: relative;
      span {
        line-height: 30px;
      }
      div {
        float: right;
        // position: absolute;
        // z-index: 3;
        // right: 0;
        // bottom: 0;
        // display: flex;
        // align-items: center;
        img {
          width: 20px;
          height: 20px;
          margin-left: 8px;
        }
      }
    }
    .operation {
      border-top: 1px solid #f9f9f9;
      height: 40px;
      display: flex;
      justify-content: space-between;
      div {
        // width: 50%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #000;
        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }
    }
  }
  // 订单状态栏
  .orderState {
    width: 340px;
    height: 30px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    .stateLeft {
      color: #717171;
      span {
        color: #925054;
      }
    }
    .stateRight {
      display: flex;
      align-items: center;
      color: #000;
      img {
        width: 5px;
        height: 10px;
        margin-left: 5px;
      }
    }
    .stateRight2 {
      display: flex;
      align-items: center;
      color: $new-dark-blue;
      img {
        width: 5px;
        height: 10px;
        margin-left: 5px;
      }
    }
  }
  // 商品详情
  .shopInfo {
    margin: 0 auto 15px;
    height: 146px;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .title {
      font-size: 16px;
      line-height: 16px;
      padding-top: 30px;
      margin: 0 0 0 10px;
      span {
        line-height: 16px;
        padding-left: 5px;
        color: #5996f8;
        border-left: 5px solid #5996f8;
      }
    }
    .shopInfoCont {
      width: 340px;
      height: 100px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #000;
      .shopLeft {
        display: flex;
        align-items: center;
        img {
          width: 50px;
          height: 50px;
          margin-left: 8px;
        }
        .contInfo {
          display: flex;
          flex-direction: column;
          margin-left: 8px;
          span {
            width: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          p {
            width: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .contMoney {
        color: #a9464b;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-right: 20px;
        .contMoneyZ {
          color: #8d8d8d;
          text-decoration: line-through;
        }
      }
    }
  }
}
// 信息展示
.showBox {
  width: 100%;
  border-bottom: 2px solid #f0f0f0;
  .showInfo {
    width: 340px;
    margin: auto;
    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      height: 50px;
      color: #727272;
    }
  }
}
// 订单编号
.orderNum {
  width: 340px;
  margin: auto;
  p {
    font-size: 14px;
    line-height: 30px;
    color: #727272;
  }
}
.kongBtnBox {
  height: 110px;
}
.operationBtn {
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  button {
    width: 100px;
    height: 30px;
    font-size: 14px;
    // background: #ff2f32;
    background: #626efd;
    color: #fff;
    border-radius: 3px;
    line-height: 30px;
  }
  .operationBtn1 {
    border: 1px solid #8d8d8d;
    color: #8d8d8d;
    background: #fff;
  }
}
.physicalBox {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
// 操作按钮
.inputCalss {
  border-radius: 4px;
}
.inputCalss2 {
  text-align: center;
  border: 1px solid #bbbbbb;
  border-radius: 4px;
}
.rejectRefundClass {
  background: #fff;
  width: 330px;
  height: 280px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  p {
    width: 280px;
    font-size: 14px;
    font-weight: 500;
    padding-top: 30px;
    margin: auto;
  }
  .input {
    width: 280px;
    height: 140px;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    color: #000;
    border-radius: 5px;
    margin: 20px auto;
    padding: 5px 0 0 5px;
  }
  div {
    display: flex;
    align-items: center;
    justify-content: center;
    button {
      width: 100px;
      height: 28px;
      border-radius: 4px;
      line-height: 28px;
      text-align: center;
      font-size: 14px;
    }
    .ok {
      // background: #e33333;
      background: #626efd;
      color: #fff;
      border: 1px solid #626efd;
    }
    .no {
      background: #fff;
      color: #8d8d8d;
      border: 1px solid #8d8d8d;
    }
  }
}
.zz {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000;
  opacity: 0.3;
}
</style>
